<script>
import { getCityCount } from '@/api/base.js';

export default {
    render: function (createElement) {
        return createElement("div", {
            attrs: {
                id: "FlowerChart",
            },
            style: {
                height: "100%"
            }
        });
    },
    data() {
        return {
            dataList: []
        }
    },
    methods: {
        initEchart() {
            var chartDom = document.getElementById('FlowerChart');
            var myChart = echarts.init(chartDom);

            // 获取数据 
            getCityCount().then(res => {
                var data = res.data
                for (let item in data) {
                    console.log(item)
                    this.dataList.push({ value: data[item], name: item })
                }
                console.log(this.dataList)

                var option = option = {
                    title: {
                        text: '职位分布',
                        top: '80%', left: '2%',
                        textStyle: { color: '#fff' }
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 20,
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '17%',
                        top: '10%',
                        containLabel: true,
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [0, 110],  // 控制图的大小
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: this.dataList
                        }
                    ]
                };

                myChart.setOption(option);
            })
        }
    },
    mounted() {
        this.initEchart();
    }
};
</script>